<script setup>
	import bottomTabBar from '@/components/bottomTabBar.vue'
	import userBanner from '@/components/userBanner.vue'

	import {
		reLaunchToHome,
		redirectToMy,
		navigateToIntegral,
		navigateToSignIn,
		navigateToLightingRecord,
		navigateToRecharge,
		navigateToSacrificeRecord,
		navigateToUpToFeedbackIndex,
		navigateToUpToRecommendCreate,
		navigateToUpToUsageAgreement,
		navigateToUserHelp,
	} from "@/assets/scripts/navigate.js"
	import {
		onMounted,
		onActivated,
		ref
	} from 'vue';
	import {
		getInfo2Api,
	} from "@/assets/api/other/recommend.js"
	import {
		h5Title,
		h5Qrcode,
	} from "@/config/index.js"

	const modal = ref()
	const modalFocus = ref()
	const modalClear = ref()
	const userInfo = ref({})

	const handleFocus = () => {
		modalFocus.value.open()
	}

	const handleClearConfirm = () => {
		uni.clearStorageSync()
		reLaunchToHome()
	}

	const handleClear = () => {
		modalClear.value.open()
	}

	const handleConfirm = () => {
		uni.showToast({
			title: '长按二维码关注公众号!',
			icon: 'error',
			complete: () => {
				// setTimeout(() => {
				// 	window.location.href =
				// 		'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzkxMTYxNjk4MA==&scene=110#wechat_redirect'
				// }, 1500)
			}
		})
	}

	const handleCustomerService = () => {
		modal.value.open()
	}

	onMounted(() => {
		userInfo_init()
	})

	onActivated(() => {
		userInfo_init()
	})

	const userInfo_init = async () => {
		const user = uni.getStorageSync('user')
		const res = await getInfo2Api(user.userId)
		if (res.code === 200) {
			userInfo.value = res.user
			uni.setStorageSync('user', res.user)
		} else {
			uni.showToast({
				title: '获取用户信息失败',
				icon: 'error',
			})
		}
	}
</script>

<template>
	<view class="bg-grey-fill">

		<uv-modal ref="modalClear" title="温馨提示" content='清理缓存后，一些数据会丢失，例如ai聊天记录，且会自动重新登录，是否确认执行该操作。' showCancelButton
			@confirm="handleClearConfirm"></uv-modal>
		<uv-modal ref="modal" title="温馨提示" :content='`您可以通过“${h5Title}”公众号，点击左下角键盘按钮，直接与客服留言对话，我们看到会及时回复您。`'></uv-modal>
		<uv-modal ref="modalFocus" title="关注公众号" confirmColor='#299a66' confirmText="长按二维码关注公众号"
			@confirm="handleConfirm">
			<view class="slot-content">
				<view class="d-flex d-flex-fdc d-flex-jcc d-flex-aic focus-box">
					<view class="text">
						长按保存二维码
					</view>
					<view class="text">
						关注{{h5Title}}公众号
					</view>
					<view class="qrcode">
						<image :src="h5Qrcode" mode="widthFix" class="image image-x"></image>
					</view>
					<view class="text">
						请先关注微信公众号,以防信息丢失(长按二维码后,点击{{h5Title}}头像即可看到关注按钮)
					</view>
				</view>
			</view>
		</uv-modal>

		<userBanner :userInfo='userInfo' :isShowExchange='false' :isUserEditAble='true' :isShowShare='true'>
		</userBanner>

		<uv-row class="p-normal pb-none">
			<uv-col>
				<uv-grid :border="true" col="2" class="py-normal bg-white ">
					<uv-grid-item class='d-flex d-flex-aic d-flex-fdr px-normal' style="flex-direction: row;">
						<view class="grid-icon d-flex-fs0">
							<image src="@/assets/pic/user-btn-1.png" mode="scaleToFill" class="image image-fill ">
							</image>
						</view>
						<view class="ml-normal d-flex-fx1" @click="redirectToMy(0)">
							<view class='font-fs14'>
								管理纪念馆
							</view>
							<view style="color: #999999; margin-top: 1px;" class='font-fs12'>
								心灵专属栖息地
							</view>
						</view>
					</uv-grid-item>
					<uv-grid-item class='d-flex d-flex-aic d-flex-fdr px-normal' style="flex-direction: row;">
						<view class="grid-icon d-flex-fs0">
							<image src="@/assets/pic/user-btn-2.png" mode="scaleToFill" class="image image-fill ">
							</image>
						</view>
						<view class="ml-normal d-flex-fx1">
							<view class='font-fs14' @click="redirectToMy(1)">
								关注纪念馆
							</view>
							<view style="color: #999999; margin-top: 1px;" class='font-fs12'>
								祭奠缅怀人和事
							</view>
						</view>
					</uv-grid-item>
				</uv-grid>
			</uv-col>
		</uv-row>

		<view class="p-normal">
			<uv-cell :border='false' style="margin-top: 2px; border-radius:4px;" isLink class="bg-white" title="积分记录"
				@click="navigateToIntegral">
				<template v-slot:icon>
					<view class="icon-box">
						<uv-icon size="50rpx" name="integral-fill"></uv-icon>
					</view>
				</template>
			</uv-cell>
			<uv-cell :border='false' style="margin-top: 2px; border-radius:4px;" isLink class="bg-white"
				title="推荐他人创建纪念馆" @click="navigateToUpToRecommendCreate">
				<template v-slot:icon>
					<view class="icon-box">
						<uv-icon size="50rpx" name="share-fill"></uv-icon>
					</view>
				</template>
				<template v-slot:value>
					<view class="d-flex">
						<uv-tags text="热门" type="error" shape="circle" size="mini"></uv-tags>
					</view>
				</template>
			</uv-cell>
			<uv-cell :border='false' style="margin-top: 2px; border-radius:4px;" isLink class="bg-white" title="点灯记录"
				@click="navigateToLightingRecord('', true)">
				<template v-slot:icon>
					<view class="icon-box">
						<uv-icon size="40rpx" name="clock-fill"></uv-icon>
					</view>
				</template>
			</uv-cell>
			<uv-cell :border='false' style="margin-top: 2px; border-radius:4px;" isLink class="bg-white" title="供奉记录"
				@click="navigateToSacrificeRecord('', true)">
				<template v-slot:icon>
					<view class="icon-box">
						<uv-icon size="40rpx" name="clock-fill"></uv-icon>
					</view>
				</template>
			</uv-cell>
			<uv-cell :border='false' style="margin-top: 2px; border-radius:4px;" isLink class="bg-white" title="签到"
				@click="navigateToSignIn">
				<template v-slot:icon>
					<view class="icon-box">
						<uv-icon size="40rpx" name="checkmark-circle-fill"></uv-icon>
					</view>
				</template>
			</uv-cell>
			<uv-cell :border='false' style="margin-top: 2px; border-radius:4px;" isLink class="bg-white" title="充值"
				@click="navigateToRecharge">
				<template v-slot:icon>
					<view class="icon-box">
						<uv-icon size="50rpx" name="gift-fill"></uv-icon>
					</view>
				</template>
			</uv-cell>
			<uv-cell :border='false' style="margin-top: 2px; border-radius:4px;" isLink class="bg-white" title="我管理的纪念馆"
				@click="redirectToMy(0)">
				<template v-slot:icon>
					<view class="icon-box">
						<uv-icon size="50rpx" name="folder"></uv-icon>
					</view>
				</template>
			</uv-cell>
			<uv-cell :border='false' style="margin-top: 2px; border-radius:4px;" isLink class="bg-white" title="我关注的纪念馆"
				@click="redirectToMy(1)">
				<template v-slot:icon>
					<view class="icon-box">
						<uv-icon size="50rpx" name="star-fill"></uv-icon>
					</view>
				</template>
			</uv-cell>
			<!-- <uv-cell :border='false' style="margin-top: 2px; border-radius:4px;" isLink class="bg-white" title="我浏览的记录">
				<template v-slot:icon>
					<view class="icon-box">
					<uv-icon size="50rpx" name="order"></uv-icon></view>
				</template>
			</uv-cell> -->
			<uv-cell :border='false' style="margin-top: 2px; border-radius:4px;" isLink class="bg-white" title="使用协议"
				@click="navigateToUpToUsageAgreement">
				<template v-slot:icon>
					<view class="icon-box">
						<uv-icon size="50rpx" name="question-circle-fill"></uv-icon>
					</view>
				</template>
			</uv-cell>
			<uv-cell :border='false' style="margin-top: 2px; border-radius:4px;" isLink class="bg-white" title="使用帮助"
				@click="navigateToUserHelp">
				<template v-slot:icon>
					<view class="icon-box">
						<uv-icon size="50rpx" name="question-circle-fill"></uv-icon>
					</view>
				</template>
			</uv-cell>
			<uv-cell :border='false' style="margin-top: 2px; border-radius:4px;" isLink class="bg-white" title="联系客服"
				@click="handleCustomerService">
				<template v-slot:icon>
					<view class="icon-box">
						<uv-icon size="50rpx" name="server-man"></uv-icon>
					</view>
				</template>
			</uv-cell>
			<uv-cell :border='false' style="margin-top: 2px; border-radius:4px;" isLink class="bg-white" title="关注微信公众号"
				@click="handleFocus">
				<template v-slot:icon>
					<view class="icon-box">
						<uv-icon size="50rpx" name="order"></uv-icon>
					</view>
				</template>
			</uv-cell>
			<uv-cell :border='false' style="margin-top: 2px; border-radius:4px;" isLink class="bg-white" title="清理缓存"
				@click="handleClear">
				<template v-slot:icon>
					<view class="icon-box">
						<uv-icon size="50rpx" name="trash-fill"></uv-icon>
					</view>
				</template>
			</uv-cell>
		</view>
	</view>

	<bottomTabBar current='4'></bottomTabBar>
</template>

<style lang="scss" scoped>
	.grid-icon {
		width: 30px;
		height: 30px;
	}

	.focus-box {
		.text {
			color: #9b9b9b;
			width: 80%;
			text-align: center;
		}

		.qrcode {
			width: 50%;

			.image {
				width: 100%;
			}
		}
	}

	.icon-box {
		width: 30px;
	}
</style>